<template>
  <div class="feedBack">
    <!-- <div class="back-btn" @click="fnBack">&lt; 返回</div> -->
    <div class="msg-wrap">
      <div class="msg-title">
        <span class="red">*</span>
        <span class="title-txt">意见或建议</span>
      </div>
      <textarea
        name=""
        v-model="content"
        placeholder="为了我们尽快的定位问题和改进，请尽量详细描述您的问题或建议。(10到100个中文字符、标点符号等)"
        onfocus="this.placeholder=''"
        onblur="this.placeholder='为了我们尽快的定位问题和改进，请尽量详细描述您的问题或建议。(10到100个中文字符、标点符号等)'"
        @input="handleTextarea"
      ></textarea>
      <div class="redtxt" v-if="showTxt">
        请填写10到100个中文字符、标点符号等
      </div>
    </div>
    <!-- <div class="msg-wrap">
      <div class="msg-title">
        <span class="title-txt">上传截图</span>
      </div>
      <van-uploader :after-read="afterRead" />
    </div> -->
    <div class="msg-wrap">
      <div class="msg-title">
        <!-- <span class="red">*</span> -->
        <span class="title-txt">联系方式</span>
      </div>
      <input
        type="text"
        v-model="contact"
        label=""
        placeholder="请输入手机号 / 邮箱 / qq"
        onfocus="this.placeholder=''"
        onblur="this.placeholder='请输入手机号 / 邮箱 / qq'"
        @input="handleInput"
      />
      <!-- <van-field v-model="value" label="" placeholder="请输入手机号码" /> -->
    </div>
    <button class="submit-btn" @click="onSubmit">提交留言</button>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { showToast, showSuccessToast, showFailToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { postData } from '@/request/request.js'
let router = useRouter()
let route = useRoute()
let user_id = localStorage.getItem('user_id')
let access_token = localStorage.getItem('access_token')
let open_id = localStorage.getItem('open_id')

let content = ref('')
let contact = ref('')
let showTxt = ref(false)

let handleTextarea = (e) => {
  content.value = e.target.value
  // content.value = e.target.value.replace(/[^\u4e00-\u9fa5]/g, '')
  if (content.value.length < 10 || content.value.length > 100) {
    showTxt.value = true
    return
  }
  showTxt.value = false
  // else {
  //   showTxt.value = false
  // }
}

let handleInput = (e) => {
  contact.value = e.target.value
}

//上传截图
// const afterRead = (file) => {
//   console.log(file.content) //base64
// }

let onSubmit = () => {
  let user_id = localStorage.getItem('user_id')
  if (!user_id) {
    Toast.fail('请先绑定手机号')
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/loginPhone/loginPhone',
      })
    }, 1000)
  } else {
    if (content.value == '') {
      showTxt.value = true
      showToast('请填写意见或建议')
      return
    } else if (content.value.length < 10 || content.value.length > 100) {
      showTxt.value = true
      return
    } else {
      showTxt.value = false
    }
    // if (content.value.length < 10 || content.value.length > 100) {
    //   showTxt.value = true
    //   return
    // }
    postData('/user/feedback/submit', {
      content: content.value,
      contact: contact.value,
    })
      .then((res) => {
        if (res.code == 0) {
          showSuccessToast('提交成功')
          // setTimeout(() => {
          //   wx &&
          //     wx.miniProgram.navigateTo({
          //       url:
          //         '/pagesC/carryUserDetail/index?carriedUserid=' +
          //         carriedUserid.value,
          //     })
          // }, 2000)
        }
      })
      .catch((err) => {
        showFailToast('提交失败')
      })
  }
}
</script>

<style scoped>
.feedBack {
  width: 100%;
  height: 100vh;
  font-size: 0.16rem;
}

/* .back-btn {
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 0.6rem;
  height: 0.25rem;
  line-height: 0.275rem;
  background: #e2e2e2;
  border-radius: 0 0.1rem 0.1em 0;
  color: #676a6d;
  font-size: 0.14rem;
  text-align: center;
  opacity: 0.8;
} */

.feedBack .msg-wrap {
  width: 100%;
  padding: 0 0.1rem;
  margin-top: 0.2rem;
  box-sizing: border-box;
}
.msg-wrap .msg-title {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #c6c9d7;
}
.red {
  color: #d52424;
  margin-right: 0.05rem;
}
.title-txt {
  color: #111736;
}

.feedBack .msg-wrap textarea {
  display: block;
  width: 100%;
  min-height: 1.5rem;
  padding: 8px 5px 0 10px;
  border-radius: 0.075rem;
  background: #f8f9fd;
  border: none;
  color: #333;
  font-size: 0.15rem;
  box-sizing: border-box;
  text-indent: 1em;
  line-height: 0.25rem;
}

.msg-wrap textarea::placeholder {
  color: #999ba5;
  font-size: 0.14rem;
}
:deep .van-cell {
  border-radius: 0.075rem;
  background: #f8f9fd;
  color: #333;
}
.redtxt {
  color: #d52424;
  margin-top: 0.1rem;
  font-size: 0.14rem;
}
.van-uploader {
  display: block;
}

.msg-wrap input {
  display: block;
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.075rem;
  background: #f8f9fd;
  border: none;
  color: #333;
  box-sizing: border-box;
  text-indent: 1em;
}
.msg-wrap input::placeholder {
  color: #999ba5;
  font-size: 0.14rem;
}
.submit-btn {
  width: 60%;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0.35rem;
  left: 20%;
  margin: 0 auto;
  border-radius: 2rem;
  outline: none;
  border: none;
  color: #674102;
  text-shadow: 0 0.01rem 0.01rem #a7813d;
  cursor: pointer;
  background: linear-gradient(#d4a863, #f9d781);
  box-shadow: 0 0.2em 0 #d4a863, 0 0.2em 0.2em #f9d781;
}

.submit-btn:active {
  box-shadow: 0 0.1em 0 #068494, 0 0.1em 0.1em grey;
  transform: translate(0, 0.1em);
}
</style>
